<template>
	<view style="height: 100%;">
	<scroll-view style="height: 85%;" scroll-y="true">
		<view class="content">
			<view class="select-way">
				<view  v-for="(way,index) in ways" :key="index" :class="currentIndex===index?'way active':'way'" @click="selectedWay(index)"><text>{{way}}</text></view>
			</view>
			<view class="select">
				<text>收货人</text>
				<text :class="datetime_value===''?'star warning':'star hidden'">*</text>
				<view class="pop" @click="popReciver">
					<template v-if="datetime_value===''">选择收货人信息</template>
				</view>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			
			<view class="select">
					<text>配送时间</text>
					<text :class="datetime_value===''?'star warning':'star hidden'">*</text>
					 <picker :range="datetime" v-model="index" @change="dateTimeChange" mode="multiSelector">
						<!-- template默认为隐藏 -->
						<template v-if="datetime_value===''">
							请选择配送时间
						 </template>
						 <template v-else>
							 {{datetime[0][index[0]]}} ---- {{datetime[1][index[1]]}}
						 </template>
					</picker>
					<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			
			<view class="select">
				<text>订货人</text>
				<text :class="datetime_value===''?'star warning':'star hidden'">*</text>
				<view class="pop" @click="open">
					<template v-if="datetime_value===''">选择订货人信息</template>
				</view>
				<uni-popup ref="popup" type="bottom">
					<view class="popInto">
						<text>订货人选择</text>
						<button type="default" @click="toAddPerson">添加联系人信息</button>
						<orderer-card></orderer-card>
					</view>
				</uni-popup>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			
			<text class="text-center">支付方式</text>
			<view class="select-way">
				<view v-for="(payway,index) in payWays" :key="index" :class="currentIndex2===index?'payway active':'payway'" @click="selectedPayWay(index)"><text>{{payway}}</text></view>
			</view>
			<text class="text-center">产品信息</text>
			
			
		<view v-for="(item,index) in list" :key="index" >
			<good-info :good="item"></good-info>
			<view class="select">
				<text>餐具数量</text>
				<text :class="spoonsnum_value===''?'star warning':'star hidden'">*</text>
				<picker mode="selector" :range="spoonsNum" @change="numChange" :value="num_index">
					<template v-if="spoonsnum_value===''">选择餐具数量</template>
					<template v-else>{{spoonsNum[num_index]}}</template>
				</picker>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			<view class="select">
				<text>生日蜡烛</text>
				<text :class="type_value===''?'star warning':'star hidden'">*</text>
				<picker mode="selector" :range="candleType" @change="typeChange" :value="type_index">
					<template v-if="type_value===''">选择生日蜡烛</template>
					<template v-else>{{candleType[type_index]}}</template>
				</picker>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			<view class="select">
				<text>祝福语牌</text>
				<view class="pop" @click="openCong">
					<template v-if="txtCong===''">填写祝福语(选填)</template>
					<template v-else>{{txtCong}}</template>
				</view>
				<uni-popup ref="popup_cong" type="bottom">
					<view class="popInto">
						<text>祝福语输入</text>
						<textarea placeholder="输入祝福语" @blur="getTxtCong">{{txtCong}}</textarea>
					</view>
				</uni-popup>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			<view class="select">
				<text>生日贺卡</text>
				<view class="pop" @click="openCard">
					<template v-if="txtCard===''">填写生日贺卡(选填)</template>
					<template v-else>{{txtCard}}</template>
				</view>
				<uni-popup ref="popup_card" type="bottom">
					<view class="popInto">
						<text>贺卡内容输入</text>
						<textarea placeholder="输入贺卡内容" @blur="getTxtCard">{{txtCard}}</textarea>
					</view>
				</uni-popup>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
		</view>
			<text class="text-center">其他信息</text>
			
			<view class="select">
				<text>备注</text>
				<view class="pop" @click="openCommite">
					<template v-if="txtCommit===''">输入备注</template>
					<template v-else>{{txtCommit}}</template>
				</view>
				<uni-popup ref="popup_commite" type="bottom">
					<view class="popInto">
						<text>备注</text>
						<textarea  placeholder="请输入备注信息" @blur="getTxtCommit">{{txtCommit}}</textarea>
					</view>
				</uni-popup>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
			<view class="select">
				<text>发票</text>
				<image src="../../static/cart-img/enter.png" mode="aspectFit"></image>
			</view>
		</view>
	</scroll-view>
	<view class="botton-box">
		<text>￥{{sum}}</text>
		<text style="font-size: 10px; font-weight: 200;">(不含运费)</text>
		<button @click="toOrderInfo">下单</button>
	</view>
</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
	export default {
		data(){
			return {
				currentIndex:"",
				currentIndex2:"",
				index:[0,0],
				datetime_value:"",
				num_index:0,
				spoonsnum_value:"",
				type_index:0,
				type_value:"",
				txtCong:"",
				txtCard:"",
				txtCommit:"",
				list:[],
				sum: 0.0
			}
		},
		computed:{
			...mapState('cart',['sum','ways','payWays','datetime','spoonsNum','candleType','goodsList'])
		},
		methods: {
			selectedWay(index){
				this.currentIndex = index
			},
			selectedPayWay(index){
				this.currentIndex2 = index
			},
			toOrderInfo(){
				let orderInfo = {
					"list": this.list,
					
				}
				uni.navigateTo({
					// url:''
				})
			},
			dateTimeChange(e){
				console.log(e.detail)
				//获得对象的 detail的 value
				//通过数组的下标改变显示在页面的值
				this.index[0] = e.detail.value[0];
				this.index[1] = e.detail.value[1];
				this.datetime_value = this.datetime[0][e.detail.value[0]]+" ----"+ this.datetime[1][e.detail.value[1]]
			},
			numChange(e){
				console.log(e)
				this.spoonsnum_value = e.detail.value
			},
			typeChange(e){
				this.type_value = e.detail.value
			},
			popReciver(){
				uni.navigateTo({
					url:'/my/my-address-add/my-address-add'
				})
			},
			toAddPerson(){
				uni.navigateTo({
					url:'/my/my-address-add/my-address-add'
				})
			},
			open(){
				this.$refs.popup.open()
			},
			openCommite(){
				this.$refs.popup_commite.open()
			},
			openCard(){
				this.$refs.popup_card.open()
			},
			openCong(){
				this.$refs.popup_cong.open()
			},
			getTxtCong(e){
				this.txtCong=e.detail.value
			},
			getTxtCard(e){
				this.txtCard=e.detail.value
			},
			getTxtCommit(e){
				this.txtCommit=e.detail.value
			}			
		},
		created() {
			const list = uni.getStorageSync("cartList")
			console.log(list[0].totalPrice)
			this.list  = list
			this.sum = list[0].totalPrice
		}
}
</script>

<style lang="scss" scoped>
	.content{
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		.select-way{
			width: 100%;
			height: 60rpx;
			display: flex;
			flex: 2;
			.way,.payway{
				margin: 0rpx 15rpx;
				border: 1px solid black;
				width: 50%;
				font-size: 33rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-weight: 100;
				}	
				&.active{
					background-color: black;
					color:white	
				}
			}
		}	
		.select{
			// border: 1px solid red;
			display: flex;
			align-items: center;
			width: 100%;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 33rpx;
			color: #515151;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			.pop{
				// border: 1px solid red;
				width: 70%;
				height: 75rpx;
				line-height: 75rpx;
				margin-left: 20rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right:35rpx;
			}
			.star{
				&.warning{
					color: red;
				}
				&.hidden{
					display: none;
				}
			}
			.popInto{
				width: 100%;
				height: 900rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;
				text{
					display: block;
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					color: black;
					font-weight: bold;
				}
				button{
					border: 1px solid black;
					width: 660rpx;
					border-radius: 0;
					text-align: center;
				}
				textarea{
					border: 1px solid black;
					width: 660rpx;
					height: 200rpx;
				}
			}
		}
		.text-center{
			display: block;
			color: #515151;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			padding: 5rpx;
			box-sizing: border-box;
			font-size: 35rpx;
			font-weight: 600;
		}
		picker{
			// display: none;
			 // border: 1px solid red;
			 width: 70%; 
			 height: 75rpx;
			 line-height: 75rpx;
			 margin-left: 20rpx;
		}
	}
	.botton-box{
		width: 100%;
		height: 200rpx;
		display: flex;
		padding: 0px 10px;
		box-sizing: border-box;
		position: fixed;
		bottom: 5px;
		align-items: center;
		button{
			width: 250rpx;
			margin-right:20px ;
			background-color: black;
			border-radius: 0;
			color: white;
			font-size: 14px;
		}
	}
	
	
	
</style>
